<template>
	<uv-popup :round="26" ref="popupRef" mode="bottom" :showConfirmButton="false">
		<view class="popup-body" @touchmove.stop.prevent="() => {}">
			<image class="popup-body-bg" src="/static/images/index/step-popup-bg.png" mode=""></image>
			<view class="popup-body-head">
				<view class="popup-body-head-title">
					<span style="font-size: 18px;color: #222222;line-height: 25px;">还款计划</span>
					<image @click="close" class="popup-body-head-close" src="/static/images/close.png" mode=""></image>
				</view>
				<view class="popup-body-head-money">
					<view class="money-box">
						总利息约：{{ allInterest }}元
					</view>
				</view>
			</view>
			<view class="popup-body-step">
				<scroll-view scroll-y="true" style="max-height: 50vh">
					<cc-defineStep :colors="colors" :stepData="stepData"></cc-defineStep>
				</scroll-view>
			</view>
		</view>
	</uv-popup>
</template>

<script>
	import dayjs from 'dayjs'
	import { calculateInterest, divideAndRound } from '../../../utils/calculate.js'
	export default {
		name: 'stepPopup',
		data() {
			return {
				stepData: [{
						name: '首期',
						money: 345.62,
						time: dayjs('2023-06-09 20:01:49').format("MM月DD日"),
						moneyInfo: "本金333.33 利息12.23"
					},
					{
						name: '首期',
						money: 345.62,
						time: dayjs('2023-06-09 20:01:49').format("MM月DD日"),
						moneyInfo: "本金333.33 利息12.23"
					},
					{
						name: '首期',
						money: 345.62,
						time: dayjs('2023-06-09 20:01:49').format("MM月DD日"),
						moneyInfo: "本金333.33 利息12.23"
					},
					{
						name: '首期',
						money: 345.62,
						time: dayjs('2023-06-09 20:01:49').format("MM月DD日"),
						moneyInfo: "本金333.33 利息12.23"
					},
					{
						name: '首期',
						money: 345.62,
						time: dayjs('2023-06-09 20:01:49').format("MM月DD日"),
						moneyInfo: "本金333.33 利息12.23"
					},
				],
				allInterest: 0
			}
		},
		mounted() {
			// this.$refs.popupRef.open()
		},
		methods: {
			open(info) {
				this.allInterest = 0
				const money = info.money || 0
				const everyMoney = divideAndRound(money, info.value)
				this.stepData = Array.from({
					length: info.value
				}, (_, i) => {
					const interest = calculateInterest(money, info.value, info.rate, i + 1);
					this.allInterest = (((this.allInterest * 100) + (interest * 100)) / 100).toFixed(2)
					return {
						name: i == 0 ? '首期' : `${i + 1}期`,
						money: (everyMoney + interest).toFixed(2),
						time: dayjs(dayjs().add(i + 1, 'M')).format("MM月DD日"),
						moneyInfo: `本金${everyMoney} 利息${interest}`
					}
				});
				this.$refs.popupRef.open()
			},
			close(){
				this.$refs.popupRef.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-body {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 166rpx;
		background-color: #fff;
		&-step {
			padding: 30rpx 40rpx 70rpx 40rpx;
		}

		&-head {
			position: relative;
			z-index: 10000;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 32rpx 32rpx 0 32rpx;

			&-close {
				position: absolute;
				z-index: 10001;
				width: 32rpx;
				height: 32rpx;
				right: 32rpx;
			}

			&-title {
				text-align: center;
				margin-bottom: 26rpx;

			}

			&-money {
				display: flex;
				justify-content: center;

				.money-box {
					background: #FFFFFF;
					border-radius: 26rpx;
					border: 1px solid #CFE5FF;
					padding: 8rpx 24rpx;
					font-size: 24rpx;
					color: #4E68AA;
					line-height: 34rpx;
				}
			}
		}

		&-bg {
			width: 100%;
			height: 166rpx;
			position: absolute;
			top: 0;
		}
	}
</style>